<template>
  <div class="goods">
    <!-- 信息功能 -->
    <div class="title">
      <div class="title-top">
        <div class="title-top-left">14</div>
        <div class="title-top-right">我的客户</div>
      </div>
      <div class="title-one">
        <div class="title-top-left">10</div>
        <div class="title-top-right">我的商机</div>
      </div>
      <div class="title-two">
        <div class="title-top-left">10</div>
        <div class="title-top-right">我的合同</div>
      </div>
      <div class="title-three">
        <div class="title-top-left">32</div>
        <div class="title-top-right">我的项目</div>
      </div>
      <div class="title-four">
        <div class="title-top-left">787.01</div>
        <div class="title-top-right">合同金额（万元）</div>
      </div>
      <div class="title-five">
        <div class="title-top-left">413.02</div>
        <div class="title-top-right">验收金额（万元）</div>
      </div>
      <div class="title-six">
        <div class="title-top-left">427.32</div>
        <div class="title-top-right">采购金额（万元）</div>
      </div>
    </div>

    <!-- 我的待办 -->
    <div class="my-todo">
      <div class="my-todo-title">
        <div class="my-todo-title-left">我的待办</div>
        <div class="my-todo-title-right">
          <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-top: 15px">
            <el-tab-pane label="全部" name="first"></el-tab-pane>
            <el-tab-pane label="市场审批" name="second"></el-tab-pane>
            <el-tab-pane label="销售审批" name="third"></el-tab-pane>
            <el-tab-pane label="合同审批" name="fourth"></el-tab-pane>
            <el-tab-pane label="项目审批" name="fiveth"></el-tab-pane>
            <el-tab-pane label="采购审批" name="sixth"></el-tab-pane>
            <el-tab-pane label="客服审批" name="seventh"></el-tab-pane>
          </el-tabs>
          <!-- <div style="color: rgb(45, 76, 171)">全部</div>
          <div>市场审批</div>
          <div>销售审批</div>
          <div>合同审批</div>
          <div>项目审批</div>
          <div>采购审批</div>
          <div>客服审批</div> -->
        </div>
      </div>
      <div class="my-todo-text">
        <el-table :data="tableData" style="width: 100%" cell-style="font-size: 12px;">
          <el-table-column fixed prop="date" label="标题" width="559">
          </el-table-column>
          <el-table-column prop="name" label="创建人" width="120">
          </el-table-column>
          <el-table-column prop="province" label="创建时间" width="120">
          </el-table-column>
        </el-table>
      </div>
      <div class="my-todo-calendar">
        <el-calendar v-model="value" style="width: 450px; height: 100px; ;">
        </el-calendar>
      </div>
    </div>

    <!-- 业务数据 -->
    <div class="my-todox" style="margin-top: 15px;">
      <div class="my-todox-title">
        <div class="my-todox-title-left">业务数据</div>
        <div class="my-todox-title-right" style="width: 400px;">
          <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-top: 15px">
            <el-tab-pane label="我的商机" name="first-1"></el-tab-pane>
            <el-tab-pane label="我的客户" name="second-2"></el-tab-pane>
            <el-tab-pane label="我的合同" name="third-3"></el-tab-pane>
            <el-tab-pane label="我的项目" name="fourth-4"></el-tab-pane>
          </el-tabs>
          <!-- <div style="color: rgb(45, 76, 171)">我的商机</div>
          <div>我的客户</div>
          <div>我的合同</div>
          <div>我的项目</div> -->
        </div>
      </div>
      <div class="my-todox-text">
        <el-table :data="tableData_x" style="width: 100%" cell-style="font-size: 12px;">
          <el-table-column fixed prop="date_shop" label="商机名称" width="300">
          </el-table-column>
          <el-table-column prop="name_shop" label="联系人" width="150">
          </el-table-column>
          <el-table-column prop="phone_shop" label="联系电话" width="150">
          </el-table-column>
          <el-table-column prop="province_shop" label="创建日期" width="200">
          </el-table-column>
        </el-table>
        <div class="my-todox-text-line">
          <div class="my-todox-text-line-left">费用管理</div>
          <div class="my-todox-text-line-right">
            <&nbsp; &nbsp; &nbsp;我的费用&nbsp; &nbsp; &nbsp;>
          </div>
          <div class="bill">
            <div><span>发票夹总金额</span>&nbsp;&nbsp;&nbsp;&nbsp;<span
                class="text">612.62</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="text">查看当前发票夹</span>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="text">添加发票</span>
            </div>
            <div>
              <span>报销流程数</span>&nbsp;&nbsp;&nbsp;&nbsp;<span
                class="text">95</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                class="text">一键发起报销申请</span>
            </div>
            <div class="bill-line">
              <div class="bill-line-text">
                <div class="bill-line-left">2000.00</div>
                <div class="bill-line-right">已报销总金额</div>
              </div>
              <div class="bill-line-text">
                <div class="bill-line-left">2000.00</div>
                <div class="bill-line-right">已报销总金额</div>
              </div>
              <div class="bill-line-text">
                <div class="bill-line-left">500.00</div>
                <div class="bill-line-right">已报销总金额</div>
              </div>
            </div>
            <div class="client">
              <div>
                <img src="../../assets/img/client.png" alt="" class="client-img">
                <div class="client-text">
                  <div>客户接待</div>
                  <div style="color: rgb(138, 138, 138)">费用报销申请-2021/11/21</div>
                </div>
                <div class="client-text1">37800.00</div>
              </div>
            </div>
            <div class="travel">
              <div>
                <img src="../../assets/img/travel.png" alt="" class="travel-img">
                <div class="travel-text">
                  <div>差旅报销</div>
                  <div style="color: rgb(138, 138, 138)">费用报销申请-2021/11/21</div>
                </div>
                <div class="travel-text1">3200.00</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 我的任务 -->
    <div class="my-todox" style="margin-top: 15px; ">
      <div class="my-todox-title">
        <div class="my-todox-title-left">我的任务</div>
        <div class="my-todox-title-right" style="width: 200px;">
          <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-top: 15px">
            <el-tab-pane label="进行中" name="first-11"></el-tab-pane>
            <el-tab-pane label="已完成" name="second-22"></el-tab-pane>
            <el-tab-pane label="已取消" name="third-33"></el-tab-pane>
          </el-tabs>
          <!-- <div style="color: rgb(45, 76, 171)">进行中</div>
          <div>已完成</div>
          <div>已取消</div> -->
        </div>
      </div>
      <div class="my-todox-text">
        <el-table :data="tableData_x" style="width: 100%" cell-style="font-size: 12px;">
          <el-table-column fixed prop="date_task" label="任务名称" width="450">
          </el-table-column>
          <el-table-column prop="name_task" label="交办人" width="150">
          </el-table-column>
          <el-table-column prop="province_task" label="交办时间" width="200">
          </el-table-column>
        </el-table>
        <div class="my-apply">
          <div class="my-apply-title">我的应用</div>
          <div class="my-apply-big">
            <div class="system">
              <img src="../../assets/img/renshi.png" alt="">
              <div style="margin-left: 70px; margin-top: -55px;">人事系统</div>
              <el-link type="info" style="margin-left: 70px; margin-top: 5px;">立即前往 ></el-link>
            </div>
            <div class="system">
              <img src="../../assets/img/caiwu.png" alt="">
              <div style="margin-left: 70px; margin-top: -55px;">财务系统</div>
              <el-link type="info" style="margin-left: 70px; margin-top: 5px;">立即前往 ></el-link>
            </div>
          </div>
          <div class="my-apply-big">
            <div class="system">
              <img src="../../assets/img/xiangmu.png" alt="">
              <div style="margin-left: 70px; margin-top: -55px;">项目系统</div>
              <el-link type="info" style="margin-left: 70px; margin-top: 5px;">立即前往 ></el-link>
            </div>
            <div class="system">
              <img src="../../assets/img/xingzheng.png" alt="">
              <div style="margin-left: 70px; margin-top: -55px;">行政系统</div>
              <el-link type="info" style="margin-left: 70px; margin-top: 5px;">立即前往 ></el-link>
            </div>
          </div>

          <div class="my-apply-big">
            <div class="system">
              <img src="../../assets/img/shichang.png" alt="" style="width: 30px; margin-left: 20px; margin-top: 20px;">
              <el-link target="_blank" style="margin-left: 58px; margin-top: -60px;">市场管理系统 ></el-link>
            </div>
            <div class="system">
              <img src="../../assets/img/hetong.png" alt="" style="width: 30px; margin-left: 20px; margin-top: 20px;">
              <el-link target="_blank" style="margin-left: 58px; margin-top: -60px;">合同管理系统 ></el-link>
            </div>
          </div>
          <div class="my-apply-big">
            <div class="system">
              <img src="../../assets/img/caigou.png" alt="" style="width: 30px; margin-left: 20px; margin-top: -10px;">
              <el-link target="_blank" style="margin-left: 58px; margin-top: -60px;">采购管理系统 ></el-link>
            </div>
            <div class="system">
              <img src="../../assets/img/kefu.png" alt="" style="width: 30px; margin-left: 20px; margin-top: -10px;">
              <el-link target="_blank" style="margin-left: 58px; margin-top: -60px;">客服管理系统 ></el-link>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 我的学习 -->
    <div class="my-todox" style="margin-top: 15px; ">
      <div class="my-todox-title">
        <div class="my-todox-title-left">我的学习</div>
        <div class="my-todox-title-right" style="width: 400px;">
          <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-top: 15px">
            <el-tab-pane label="全部" name="first-111"></el-tab-pane>
            <el-tab-pane label="业务场景" name="second-222"></el-tab-pane>
            <el-tab-pane label="规章制度" name="third-333"></el-tab-pane>
            <el-tab-pane label="技能培训" name="fourth-444"></el-tab-pane>
          </el-tabs>
          <!-- <div style="color: rgb(45, 76, 171)">全部</div>
          <div>业务场景</div>
          <div>规章制度</div>
          <div>技能培训</div> -->
        </div>
      </div>
      <div class="my-todox-text">
        <el-table :data="tableData_x" style="width: 100%" cell-style="font-size: 12px;">
          <el-table-column fixed prop="date_learn" label="课程名称" width="450">
          </el-table-column>
          <el-table-column prop="name_learn" label="讲师" width="150">
          </el-table-column>
          <el-table-column prop="province_learn" label="任务进度" width="200">
          </el-table-column>
        </el-table>
        <div class="remind">
          <div class="remind-left">
            <div class="remind-left-title">提醒中心</div>
            <div class="remind-left-text" style="color: rgb(166, 179, 196)">
              <div style="color: rgb(139, 192, 236)">合同</div>
              <div>项目</div>
              <div>采购</div>
              <div>客服</div>
            </div>
          </div>

          <div class="remind-left-pact">
            <div>
              <img src="../../assets/img/pact.png" alt="" class="remind-left-pact-img">
            </div>
            <div class="remind-text">
              <div>合同提醒</div>
              <div>有<span style="color: red;">10个</span>新提醒</div>
            </div>
            <div>
              <el-button size="small" class="remind-btn">查看详情</el-button>
            </div>
          </div>

          <div class="alteration">
            <div style="margin-left: 20px;">销售合同变更</div>
            <el-button type="info" plain round size="mini" style="width: 60px; margin-right: 10px;">3</el-button>
          </div>
          <div class="alteration">
            <div style="margin-left: 20px;">采购合同变更</div>
            <el-button type="info" plain round size="mini" style="width: 60px; margin-right: 10px;">5</el-button>
          </div>
          <div class="alteration">
            <div style="margin-left: 20px;">项目合同变更</div>
            <el-button type="info" plain round size="mini" style="width: 60px; margin-right: 10px;">4</el-button>
          </div>
          <div class="alteration">
            <div style="margin-left: 20px;">合同相对方注销</div>
            <el-button type="info" plain round size="mini" style="width: 60px; margin-right: 10px;">1</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 我的协作 -->
    <div class="my-todox" style="margin-top: 15px; ">
      <div class="my-todox-title">
        <div class="my-todox-title-left">我的协作</div>
        <div class="my-todox-title-right" style="width: 200px;">
          <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-top: 15px">
            <el-tab-pane label="我负责的" name="first-1111"></el-tab-pane>
            <el-tab-pane label="我参与的" name="second-2222"></el-tab-pane>
          </el-tabs>
          <!-- <div style="color: rgb(45, 76, 171)">我负责的</div>
          <div>我参与的</div> -->
        </div>
      </div>
      <div class="my-todox-text">
        <el-table :data="tableData_x" style="width: 100%" cell-style="font-size: 12px;">
          <el-table-column fixed prop="date_cooperation" label="主题" width="450">
          </el-table-column>
          <el-table-column prop="name_cooperation" label="负责人" width="150">
          </el-table-column>
          <el-table-column prop="province_cooperation" label="创建日期" width="200">
          </el-table-column>
        </el-table>

        <div class="my-apply">
          <div class="my-apply-title">我的应用</div>
          <div class="my-apply-big">
            <div class="system">
              <img src="../../assets/img/renshi.png" alt="">
              <div style="margin-left: 70px; margin-top: -55px;">人事系统</div>
              <el-link type="info" style="margin-left: 70px; margin-top: 5px;" @click="renshi">立即前往 ></el-link>
            </div>
            <div class="system">
              <img src="../../assets/img/caiwu.png" alt="">
              <div style="margin-left: 70px; margin-top: -55px;">财务系统</div>
              <el-link type="info" style="margin-left: 70px; margin-top: 5px;" @click="caiwu">立即前往 ></el-link>
            </div>
          </div>
          <div class="my-apply-big">
            <div class="system">
              <img src="../../assets/img/xiangmu.png" alt="">
              <div style="margin-left: 70px; margin-top: -55px;">项目系统</div>
              <el-link type="info" style="margin-left: 70px; margin-top: 5px;" @click="xiangmu">立即前往 ></el-link>
            </div>
            <div class="system">
              <img src="../../assets/img/xingzheng.png" alt="">
              <div style="margin-left: 70px; margin-top: -55px;">行政系统</div>
              <el-link type="info" style="margin-left: 70px; margin-top: 5px;" @click="xingzheng">立即前往 ></el-link>
            </div>
          </div>
          <div class="my-apply-big">
            <div class="system">
              <img src="../../assets/img/shichang.png" alt="" style="width: 30px; margin-left: 20px; margin-top: 20px;">
              <el-link target="_blank" style="margin-left: 58px; margin-top: -60px;">市场管理系统 ></el-link>
            </div>
            <div class="system">
              <img src="../../assets/img/hetong.png" alt="" style="width: 30px; margin-left: 20px; margin-top: 20px;">
              <el-link target="_blank" style="margin-left: 58px; margin-top: -60px;">合同管理系统 ></el-link>
            </div>
          </div>
          <div class="my-apply-big">
            <div class="system">
              <img src="../../assets/img/caigou.png" alt="" style="width: 30px; margin-left: 20px; margin-top: -10px;">
              <el-link target="_blank" style="margin-left: 58px; margin-top: -60px;">采购管理系统 ></el-link>
            </div>
            <div class="system">
              <img src="../../assets/img/kefu.png" alt="" style="width: 30px; margin-left: 20px; margin-top: -10px;">
              <el-link target="_blank" style="margin-left: 58px; margin-top: -60px;">客服管理系统 ></el-link>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first',
      activeName: 'first-1',
      activeName: 'first-11',
      activeName: 'first-111',
      activeName: 'first-1111',
      value: new Date(),
      tableData: [{
        date_shop: '档案系统老旧',
        province_shop: '2024-01-11',
        date: '询价公告-张帅扬-2024-09-25',
        name: '张帅扬',
        province: '2024-09-25'
      }, {
        date_shop: '上海亘岩集团客户购买商机',
        province_shop: '2023-08-31',
        date: '66合同测试数据（合同名称:66合同测试数据, 合同金额:490000）',
        name: '任贯逞',
        province: '2024-09-25'
      }, {
        date_shop: '上海亘岩集团采购意向',
        province_shop: '2023-08-31',
        date: '项目工时填报-任贯逞-2024-09-25',
        name: '任贯逞',
        province: '2024-09-25'
      }, {
        date_shop: '上海亘岩网络科技有限公司采购意向',
        province_shop: '2023-08-31',
        date: 'cf测试销售合同01（合同名称:cf测试销售合同01, 合同金额:600000）',
        name: '赵泽煜',
        province: '2024-09-25'
      }, {
        date_shop: 'CRM项目',
        province_shop: '2023-03-23',
        date: 'cf一般采购合同-0925（合同名称:cf一般采购合同-0925）',
        name: '赵泽煜',
        province: '2024-09-25'
      }, {
        date: '面试安排流程-乔锦辉-2024-09-25（面试负责人:叶柯, 申请人:叶柯）',
        name: '乔锦辉',
        province: '2024-09-25'
      }, {
        date: '面试安排流程-乔锦辉-2024-09-25（面试负责人:叶柯, 申请人:叶柯）',
        name: '乔锦辉',
        province: '2024-09-25'
      }, {
        date: '用车申请-马世浩-2024-09-25（用车分部:维森集团股份有限公司, 开始日期:2024-09-25）',
        name: '马世浩',
        province: '2024-09-25'
      }
      ],
      tableData_x: [{
        date_shop: '档案系统老旧',
        province_shop: '2024-01-11',
        date_task: '【临时交办】上级领导来访汇报资料准备',
        name_task: '未办结',
        province_task: '2020-05-12',
        date_learn: '维森汇协同管理平台项目实施方案汇总7.0',
        name_learn: '张帅扬',
        province_learn: '10月19日（周二）17：00',
        date_cooperation: '近期疫情防控相关注意事项',
        name_cooperation: '王企航',
        province_cooperation: '2020-06-03'
      }, {

        date_shop: '上海亘岩集团客户购买商机',
        province_shop: '2023-08-31',
        date_task: '【会议督办】集团内部巡视工作计划部署会议督办事项',
        name_task: '未办结',
        province_task: '2020-05-12',
        date_learn: '重庆市电子政务内网办公平台项目详细方案',
        name_learn: '赵泽煜',
        province_learn: '10月19日（周二）17：00',
        date_cooperation: '共享派工意见建议',
        name_cooperation: '张帅扬',
        province_cooperation: '	2019-11-25'
      }, {
        date_shop: '上海亘岩集团采购意向',
        province_shop: '2023-08-31',
        date_task: '【公文督办】维森集团实行投资项目线上并联核准制度的通知',
        name_task: '即将逾期',
        province_task: '2020-05-12',
        date_learn: '粮者X酒业[客户资源管理]项目分享',
        name_learn: '乔锦辉',
        province_learn: '10月20日（周三）17：00',
        date_cooperation: '共享派工作业交流',
        name_cooperation: '赵泽煜',
        province_cooperation: '2019-11-25'
      }, {
        date_shop: '上海亘岩网络科技有限公司采购意向',
        province_shop: '2023-08-31',
        date_task: '【重大项目】关于世博地块项目的重点工作指引',
        name_task: '逾期未办结',
        province_task: '2020-05-12',
        date_learn: 'NO.30 中国维森科工集团协同办公系统平台项目——门户定制微搜元素需求评估',
        name_learn: '任贯逞',
        province_learn: '10月20日（周三）17：00',
        date_cooperation: '市场宣传资料分享',
        name_cooperation: '赵泽煜',
        province_cooperation: '2018-12-18'
      }, {
        date_shop: 'CRM项目',
        province_shop: '2023-03-23',
        date_task: '【重大事项】关于滨江地块投资改造项目',
        name_task: '未办结',
        province_task: '2020-05-12',
        date_learn: '亘岩项目企业微信考勤数据同步开发评估',
        name_learn: '马世浩',
        province_learn: '10月18日（周一）17：00',
        date_cooperation: '项目经验分享',
        name_cooperation: '马世浩',
        province_cooperation: '2018-12-18'
      }
      ]
    }
  },
  methods: {
    renshi(){
      this.$router.push('/personnel/personnel')
    },
    xiangmu() {
      this.$router.push('/xiangmu/xianmu')
    },
    caiwu() {
      this.$router.push('/finance/finance')
    },
    xingzheng() {
      this.$router.push('/maheimei/administration')
    }
  }
}
</script>

<style>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100px;
  background-color: rgba(245, 245, 245, 0.642);
}

.title-top,
.title-one,
.title-two,
.title-three,
.title-four,
.title-five,
.title-six {
  width: 114px;
  height: 60px;
  /* background-color: aqua; */
}

.title-top-left {
  margin-top: 9px;
  text-align: center;
  color: rgb(54, 95, 168);
}

.title-top-right {
  margin-top: 5px;
  font-size: 12px;
  text-align: center;
  color: rgb(170, 170, 170);
}

.my-todo {
  margin-top: 10px;
  width: 800px;
  height: 481px;
  background-color: rgba(245, 245, 245, 0.642);
}

.my-todox {
  margin-top: 10px;
  width: 800px;
  height: 340px;
  background-color: rgba(245, 245, 245, 0.642);
}

.my-todo-title {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  /* background-color: red; */
  color: black;

}

.my-todox-title {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  /* background-color: red; */
  color: black;

}

.my-todo-title-left {
  color: rgb(45, 76, 171);
  font-size: 20px;
}

.my-todox-title-left {
  color: rgb(45, 76, 171);
  font-size: 20px;
}

.my-todo-title-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 500px;
  height: 50px;
  font-size: 14px;
  /* background-color: rgb(45, 76, 171); */
  margin-left: 20px;
}

.my-todox-title-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 500px;
  height: 50px;
  font-size: 14px;
  /* background-color: rgb(45, 76, 171); */
  margin-left: 20px;
}

.my-todo-text {
  margin-top: 5px;
  width: 100%;
  height: 50px;
}

.my-todox-text {
  margin-top: 5px;
  width: 100%;
  height: 50px;
}

.my-todo-calendar {
  width: 450px;
  height: 80px;
  margin-left: 800px;
  margin-top: -100px;
}

.el-calendar-table .el-calendar-day {
  height: 61px !important;
}

.el-calendar {
  width: 450px !important;
}

.my-todox-text-line {
  width: 410px;
  height: 340px;
  background-color: rgb(249, 249, 249);
  margin-left: 820px;
  margin-top: -340px;
}

.my-todox-text-line-left {
  width: 200px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: rgb(66, 94, 180);
}

.my-todox-text-line-right {
  width: 200px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: rgb(66, 94, 180);
  margin-top: -80px;
  margin-left: 140px;
}

.bill {
  width: 350px;
  height: 50px;
  margin-left: 30px;
  font-size: 14px;
}

.text {
  color: rgb(66, 94, 180);
}

.bill-line {
  display: flex;
  justify-content: space-between;
  width: 350px;
  height: 80px;
  margin-top: 45px;
}

.bill-line-text {
  width: 110px;
  height: 80px;
}

.bill-line-left {
  display: flex;
  justify-content: center;
  font-size: 18px;
}

.bill-line-right {
  display: flex;
  margin-top: 5px;
  justify-content: center;
  font-size: 17px;
}

.client {
  width: 350px;
  height: 50px;
  margin-top: -15px;
}

.client-img {
  width: 50px;
  height: 50px;
}

.client-text {
  margin-top: 5px;
  margin-top: -50px;
  margin-left: 60px;
}

.client-text1 {
  margin-top: -25px;
  margin-left: 280px;
  color: red;
}

.travel {
  width: 350px;
  height: 50px;
  margin-top: 5px;
}

.travel-img {
  width: 50px;
  height: 50px;
}

.travel-text {
  margin-top: 5px;
  margin-top: -50px;
  margin-left: 60px;
}

.travel-text1 {
  margin-top: -25px;
  margin-left: 280px;
  color: red;
}

.remind {
  width: 410px;
  height: 340px;
  margin-left: 820px;
  margin-top: -340px;
  background-color: rgb(249, 249, 249);
}

.remind-left {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.remind-left-title {
  margin-top: 10px;
  margin-left: 20px;
  width: 100px;
  height: 50px;
  font-size: 18px;
  color: rgb(50, 76, 164);
}

.remind-left-text {
  margin-right: 20px;
  margin-top: 20px;
  width: 150px;
  height: 50px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}

.remind-left-pact {
  width: 410px;
  height: 100px;
}

.remind-left-pact-img {
  margin-top: 20px;
  margin-left: 20px;
}

.remind-left-pact {
  display: flex;
  justify-content: space-between;
}

.remind-btn {
  width: 80px;
  height: 30px;
  margin-top: 35px;
}

.remind-text {
  margin-top: 32px;
  margin-left: -120px;
}

.alteration {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.my-apply {
  width: 410px;
  height: 340px;
  background-color: rgb(249, 249, 249);
  margin-left: 820px;
  margin-top: -340px;
}

.my-apply-title {
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: rgb(43, 75, 171);
}

.my-apply-big {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
}

.system {
  width: 160px;
  height: 60px;
}
</style>